<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>维基解密</title>

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: green;
    }
    #container {
      width: 300px;
      height: 500px;
      background-color: wheat;
      position: relative;
    }
    .block {
      background-color: gray;
      position: absolute;
      box-sizing: border-box; /**padding也包含在总大小里*/
      border: 1px solid lightblue;
    }
    .block-highlight {
      background-color: rebeccapurple;
    }
  </style>

</head>
<body>

<div id="container"></div>

</body>

<script>
  const RowCount = 5, ColCount = 3, BlockWidthHeight = 100


   // @param row 行号: 0, 1, 2
   // @param col 列号: 0, 1, 2, 3, 4
   //  @param canHighlight 能否点亮

  function createABlock(row, col, canHighlight) {
    const containerHtml = document.getElementById('container')
    const blockNode = document.createElement('div')

    if (canHighlight) {
      blockNode.className = 'block block-highlight'
    }else {
      blockNode.className = 'block'
    }

    blockNode.style.width = `${BlockWidthHeight}px`
    blockNode.style.height = `${BlockWidthHeight}px`

    const x = col * BlockWidthHeight
    const y = row * BlockWidthHeight
    blockNode.style.left = `${x}px`
    blockNode.style.top = `${y}px`

    containerHtml.appendChild(blockNode)
  }


  /** 测试代码  */
  const one = [[0, 0, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 0, 0]]
  for (let i = 0; i < RowCount; i++) {
   for (let j = 0; j < ColCount; j++) {
   createABlock(i, j, Math.random() > 0.5)
    }
   }

</script>
</html>